<template>
  <div class="head-left">
    <div class="head-item">
      仪表面板
    </div>
    <div class="head-item">
      班级管理
    </div>
    <div class="head-item">
      课程管理
    </div>
  </div>
  <div class="head-right">
    <div class="head-item">
      <el-icon>
        <Search/>
      </el-icon>
    </div>
    <div class="head-item">
      <el-icon>
        <Bell/>
      </el-icon>
    </div>
    <div class="head-item" @click="toggleFullScreen">
      <el-icon>
        <FullScreen/>
      </el-icon>
    </div>
    <el-dropdown>
    <span class="el-dropdown-link">
      <img :src="user.staff.photoUrl" alt="">
      {{user.staff.realName}}
    </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item @click="router.push('staffInfo')">
            <el-icon><User /></el-icon>
            个人信息
          </el-dropdown-item>
          <el-dropdown-item divided @click="out">
            <el-icon><SwitchButton /></el-icon>
            退出登录
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup>
import router from "@/router/index.js";
import {useStaffStore} from "@/stores/staff.js";
import {ElMessage} from "element-plus";
import {Bell, FullScreen, Odometer, Search, SwitchButton, User} from "@element-plus/icons-vue";
import {ref} from "vue";

const user = ref({
  staff: {}
})
user.value = useStaffStore().staffInfo

//退出登录
const out = async () => {
  localStorage.removeItem("token")
  await useStaffStore().clearStaff()
  ElMessage({
    message: '操作成功',
    type: 'success',
    duration: 500
  })
  await router.push("login")
}

const toggleFullScreen = () => {
  if (!document.fullscreenElement && // 标准方法
      !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) {
    if (document.documentElement.requestFullscreen) {
      document.documentElement.requestFullscreen();
    } else if (document.documentElement.msRequestFullscreen) {
      document.documentElement.msRequestFullscreen();
    } else if (document.documentElement.mozRequestFullScreen) {
      document.documentElement.mozRequestFullScreen();
    } else if (document.documentElement.webkitRequestFullscreen) {
      document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    }
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    }
  }
}

</script>

<style scoped>
.head-left {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.head-right{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

.head-item{
  padding: 10px 10px 10px 10px;
  cursor: pointer;
  border-radius: 5px;
}

.head-right .head-item{
  padding: 10px 10px 5px 10px;
}

.head-item .el-icon{
  width: 15px;
}

.head-item .el-icon svg{
  width: 15px;
  height: 15px;
}

.head-item:hover{
  background-color: #E9F2FF;
  color: #4580FF;
}

.el-dropdown {
  cursor: pointer;
}

.el-dropdown-link:focus{
  outline: none;
}

.el-dropdown-link{
  display: flex;
  align-items: center;
  gap: 10px;
}

.el-dropdown img {
  height: 35px;
}
</style>
